<template>
	<view class="u-wrap">
		<u-navbar title="搜索"></u-navbar>
		<view class="search">
			<u-search
				placeholder="请输入关键字搜索商品" 
				placeholder-color="#B5B5B5"  
				@search="searchList"
				@clear="clearSearch"
				bg-color="#fff" search-icon-color="#eec8ff" :show-action="false" :clearabled="true" v-model="keyword"></u-search>
		</view>
		<view class="goodsList">
			<view class="list" v-for="(item,idx) in goodsList" :key="idx" @click="details(item.id)">
				<view>
					<image :src="item.image" mode=""></image>
				</view>
				<view class="info">
					<view class="tit">
						{{item.title}}
					</view>
					<view class="price">￥<text style="font-size: 34rpx;">{{item.price}}</text></view>
					<view class="bi">
						{{item.integral}}{{ $t('糯米值') }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				keyword: '',
				goodsList:[],
			}
		},
		onLoad(option) {
		},
		// 触底
		onReachBottom() {
			if (this.goodsList.length < this.page * 10) {
				return
			}
			this.page++;
			this.getList()
		},
		methods: {
			clearSearch(){
				this.page = 1;
				this.goodsList = [];
			},
			searchList(){
				this.getList();
			},
			details(id) {
				uni.navigateTo({
					url: '/pagesB/pages/mall/goodsInfo?id=' + id
				})
			},
			getList(order,type){
				console.log(order,type);
				uni.showLoading({
					title:"加载中"
				})
				this.$http({
					url: "api/common/get_goods_list",
					data:{
						page:this.page,
						pid:this.id,
						order:order,
						type:type,
						keyword:this.keyword,
					}
				}).then(res => {
					uni.hideLoading()
					console.log(res);
					if (res.data.code == 1) {
						this.show = false
						var data = res.data.data
						this.goodsList = this.goodsList.concat(data);
					}else{
						this.show = true
					}
				}).catch(err => {});
			}
		},
	}
</script>

<style>
	page{
		background-color: #F3F8FC;
	}
	.search{
		margin:20rpx;
	}
	.goodsList{
		background-color: #F3F8FC;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.goodsList .list{
		margin-bottom: 20rpx;
		background-color: #fff;
		width: 345rpx;
		
	}
	.goodsList .list image{
		width: 345rpx;
		height: 345rpx;
	}
	.goodsList .list .info{
		padding: 20rpx;
		box-sizing: border-box;
	}
	.goodsList .list .info .tit{
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 1.2;
		height: 64rpx;
	}
	.goodsList .list .info .price{
		margin: 8rpx 0;
		font-weight: bold;
		font-size: 26rpx;
	}
	.goodsList .list .info .bi{
		color: #E97B13;
		font-size: 28rpx;
	}
</style>